<template>
    <div class="lottery">
        <transition name="pageshow">
            <div class="container"
                 v-show="luckypage==1">
                <div class="text1">投票成功！</div>
                <div class="text2">“恭喜您获得一次抽奖机会”</div>
                <div class="zhuanpan">
                    <img class="pan"
                         :class="roate? (lucky?'pan-roate':'unlucky'):''"
                         src="http://cache.51job.com/2019/apc/miniapp/zhuanpan.png" />
                    <div @click="playReward"
                         class="point">
                        <img class="pointimg"
                             src="http://cache.51job.com/2019/apc/miniapp/go.png" />
                    </div>
                </div>
            </div>
        </transition>
        <transition name="pageshow">
            <Lucky v-show="luckypage==2"></Lucky>
        </transition>
        <transition name="pageshow">
            <Regret v-show="luckypage==3"></Regret>
        </transition>
    </div>
</template>

<script>
import Lucky from "../components/Lucky";
import Regret from "../components/Regret";
export default {
    data() {
        return {
            roate: false,
            lucky: false,
            luckypage: 0,
            luckynum: 0, //通过luckynum判断是否中奖，跳转哪个页面
            havePlay: false //防止重复抽奖
        };
    },
    name: "lottery",
    mounted() {
        this.$nextTick(() => {
            this.luckypage = 1;
        });
    },
    created() {
        if (
            !this.globalData.self.number ||
            this.globalData.self.number.length < 1 ||
            !this.globalData.self.voted
        ) {
            this.$router.replace("/");
        }
    },
    methods: {
        playReward() {
            //调用接口获取中奖数据
            this.$cookie.getCookie("number");
            let form = new FormData();
            form.append("number", this.$cookie.getCookie("number"));
            this.$http.post(`${this.baseUrl}lottery`, form).then(res => {
                console.log(res);

                // 中奖为1， 未中为2
                this.luckynum = res.data.status;
                if (!this.havePlay) {
                    //防止重复抽奖
                    switch (this.luckynum) {
                        case 200:
                            this.roate = true;
                            this.lucky = true;
                            setTimeout(() => {
                                this.luckypage = 2; //显示中奖页面
                            }, 7000);
                            break;
                        default:
                            this.roate = true;
                            this.lucky = false;
                            setTimeout(() => {
                                this.luckypage = 3; //显示未中奖页面
                            }, 7000);
                            break;
                    }
                    this.havePlay = true;
                }
            });
        }
    },
    components: {
        Lucky: Lucky,
        Regret: Regret
    }
};
</script>

<style lang="scss" scoped>
/*v-enter 是进入之前，元素的起始状态*/
/*v-leave-to 离开之后动画的终止状态*/
.pageshow-enter,
.pageshow-leave-to {
    opacity: 0; /*透明度*/
    transform: scale(0.5);
}
/*入场(离场)动画的时间段   */
.pageshow-enter-active,
.pageshow-leave-active {
    transition: all 0.8s ease;
}

.lottery {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.container {
    width: 100%;
    /* height: 100%; */
    transition: 0.5s all linear;
    overflow: hidden;
}
.container-end {
    opacity: 0;
    transform: scale(0.5);
}
.lucky {
    opacity: 0;
    transform: scale(0.5);
    transition: 1s all linear;
}
.lucky-show {
    opacity: 1;
    transform: scale(1);
}
.text1 {
    position: relative;
    color: #ff5f5e;
    font-size: 0.56rem;
    font-family: PingFangSC;
    font-weight: 500;
    /* width:280rpx; */
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    /* margin: 0 auto; */
    margin-top: 1.06rem;
}

.text2 {
    display: block;
    color: #333333;
    font-size: 0.34rem;
    width: 100%;
    text-align: center;
    line-height: 0.34rem;
    margin-top: 0.18rem;
}

.zhuanpan {
    position: relative;
    width: 6.84rem;
    height: 6.84rem;
    margin: 0 auto;
    margin-top: 1.48rem;
}
.pan {
    display: block;
    position: absolute;
    width: 6.84rem;
    height: 6.84rem;
    top: 0;
    left: 0;
}
.pan-roate {
    animation: PanRoate 6s ease forwards;
}
@keyframes PanRoate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1800deg);
    }
}
.unlucky {
    animation: nolucky 6s ease forwards;
}
@keyframes nolucky {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1860deg);
    }
}
.point {
    display: block;
    position: relative;
    width: 2.24rem;
    height: 2.84rem;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}
.pointimg {
    width: 100%;
    height: 100%;
}
</style>